<template>
  <Prompts
    title="🤔 You might also want to ask:"
    :items="items"
    vertical
  />
</template>

<script setup name="BubblePrompts">
import { h } from 'vue'
import { CoffeeOutlined, FireOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { Prompts } from 'ant-design-x-vue'

const coffeeOutlinedIcon = h(CoffeeOutlined, { style: { color: '#964B00' } })
const smileOutlinedIcon = h(SmileOutlined, { style: { color: '#FAAD14' } })
const fireOutlinedIcon = h(FireOutlined, { style: { color: '#FF4D4F' } })

const items = [
  {
    key: '6',
    icon: coffeeOutlinedIcon,
    description: 'How to rest effectively after long hours of work?',
    disabled: false,
  },
  {
    key: '7',
    icon: smileOutlinedIcon,
    description: 'What are the secrets to maintaining a positive mindset?',
    disabled: false,
  },
  {
    key: '8',
    icon: fireOutlinedIcon,
    description: 'How to stay calm under immense pressure?',
    disabled: false,
  },
]
</script>